<template>
    <div class="top_icon">
        <van-icon size="32" name="wap-home-o" />
        <span class="top_text">网易严选</span>
        <van-icon size="32" name="search" />
        <van-icon badge="2" size="32" name="shopping-cart-o" @click="toShopCart"/>
    </div>
</template>

<script setup lang="ts">
import {useRouter } from 'vue-router';
const router = useRouter()
const toShopCart = () => {
    router.push(`/cart`)
};
</script>

<style scoped>
.top_icon{
    display: flex;
    height: 44px;
    align-items: center;
    justify-content: center;
    margin: 0 8px 0 12px;
    border-bottom: 4px solid ;
    border-image-source: linear-gradient(to right, #3f87a6, #ebf8e1, #f69d3c);
    border-image-slice: 1;
}
.top_text{
    flex: 1;
    text-align: center;
    color: rgb(85,26,13);
}
</style>